<template>
<div class="container">
  <div class="contribute-box">
    <div class="box-header">
      <div class="space"></div>

      <span class="contribute-type"
            v-for="t in CONTRIBUTE_TYPE"
            @click="chooseType(t)"
            :class="contributeType === t.key ? chooseClass : ''">
        {{ t.value }}投稿
      </span>

    </div>
    <div class="box-content" v-show="step === 1">
      <div class="inner-content">
        <img src="../assets/album-fill.png" class="img-fluid">
        <div class="click-to-upload" @click="toNext()">
          <div class="left">
            <img src="../assets/music-2-fill.png" class="img-fluid">
          </div>
          <div class="right">
            <p>点击上传{{contributeTitle}}</p>
          </div>
        </div>
        <file-upload ref="file" :upload-type="contributeType"></file-upload>
        <div class="hint">
          <img src="../assets/error-warning-fill.png">
          <span>上传音频，即表示您已同意<a href="javascript:void(0)">xx使用协议</a>，请阅读<a href="javascript:void(0)">音频投稿规范</a>。</span>
        </div>
      </div>
    </div>

    <div class="box-content" v-show="step === 2">
      <div class="space-right"></div>
      <div class="accompany-box" v-show="contributeType === CONTRIBUTE_TYPE.ACCOMPANY.key">
        <div class="left">
          <div class="upload-pic" @click="uploadPicture()">
            <img src="../assets/image-add-fill.png">
            <p>上传您的封面</p>

          </div>
          <p><i class="fa-circle fa"></i> 建议上传与伴奏风格相近的封面，
            有助于稿件的曝光，请务必上传</p>
        </div>
        <div class="right">
          <div class="right-header">
            <div class="music-fill" @click="uploadAccompany()">
              <img src="../assets/folder-music-fill.png" class="img-fluid">
            </div>

<!--            上传进度-->
            <div class="upload-progress">
              <div class="progress-text-div">
                <span class="progress-desc">this is loop...</span>
                <span class="progress-text">上传完成{{accompanyProgress}}%</span>
                <i class="fa fa-trash trash"></i>
              </div>
              <div class="progress-bar" :style="{width: dynamicAccompanyWidth}"></div>
            </div>

          </div>

<!--          form-->
          <div class="form-accompany p-2">
            <div class="item-div">
              <p style="margin: 20px 0 0 0" class="text-p">音频分类</p>
              <div class="form-check form-check-inline" v-for="obj in ORIGINAL_TRANSFER">
                <input class="form-check-input" type="radio" name="original" :id="obj.vid" :value="obj.key" v-model="accompanyModel.isOriginal">
                <label class="form-check-label text-p" :for="obj.vid">{{ obj.value }}</label>
              </div>

            </div>

            <div class="item-div d-flex">
              <p class="text-p">原曲链接</p>
              <input type="text" v-model="accompanyModel.originalLink">

            </div>

            <div class="item-div d-flex">
              <p class="text-p">稿件标题</p>
              <input type="text" v-model="accompanyModel.title">

            </div>

            <div class="item-div d-flex">
              <p class="text-p">原版作者</p>
              <input type="text" v-model="accompanyModel.originalOwner">

            </div>

            <div class="item-div">
              <p class="text-p">添加标签</p>
              <span class="tagger badge" v-for="item in tagger">{{ item }}</span>
              <input class="tagger-input" @keydown="createTagger" v-model="inputTagger">
              <span class="text-enter">按回车Enter创建标签</span>
            </div>

            <div class="item-div">
              <p class="text-p">简介</p>
              <textarea class="intro-input" v-model="accompanyModel.intro" placeholder="对于这首作品写下你想说的话吧"></textarea>
            </div>

          </div>
        </div>
      </div>
      <div class="project-box" v-show="contributeType === CONTRIBUTE_TYPE.PROJECT.key">
<!--        <div class="space-right"></div>-->
        <div class="project-content">
          <div class="right-header">
            <div class="music-fill" @click="uploadProject()">
              <img src="../assets/folder-music-fill.png" class="img-fluid">
            </div>

            <!--            上传进度-->
            <div class="upload-progress">
              <div class="progress-text-div">
                <span class="progress-desc">how to like ille...</span>
                <span class="progress-text">上传完成{{projectProgress}}%</span>
                <i class="fa fa-trash trash"></i>
              </div>
              <div class="progress-bar" :style="{width: dynamicProjectWidth}"></div>
            </div>

          </div>

          <div class="form-project p-2">

            <div class="item-div">
              <p style="margin: 10px 0 0 0" class="text-p">工程类型</p>

              <div class="form-check form-check-inline" v-for="obj in PROJECT_TYPE">
                <input class="form-check-input" type="radio" :id="obj.vid" :value="obj.key" v-model="projectModel.projectType">
                <label class="form-check-label text-p" :for="obj.vid">{{ obj.value }}</label>
              </div>

            </div>

            <div class="item-div">
              <p class="text-p" style="margin: 0">是否搬运<span class="transfer-radio-hint">选否默认是您本人作品</span></p>
              <div class="form-check form-check-inline" v-for="obj in YES_NO">
                <input class="form-check-input" type="radio" :id="obj.vid" :value="obj.key" v-model="projectModel.isTransfer">
                <label class="form-check-label text-p" :for="obj.vid">{{ obj.value }}</label>
              </div>
            </div>

            <div class="item-div" v-if="projectModel.isTransfer === 1">
              <p class="text-p">请填写歌曲原作者名以及第三方发布平台外网链接</p>
              <input type="text" v-model="projectModel.originalOwner" placeholder="请输入作者名">

            </div>

            <div class="item-div">
              <p class="text-p" v-show="projectModel.isTransfer !== 1">请填写歌曲外网链接</p>
              <input type="text" v-model="projectModel.thirdPartyLink" placeholder="请输入外网链接">
            </div>

            <div class="item-div d-flex">
              <p class="text-p">请从您的b站视频中绑定该作品</p>


            </div>



            <div class="item-div">
              <p class="text-p">添加标签</p>
              <span class="tagger badge" v-for="item in tagger">{{ item }}</span>
              <input class="tagger-input" v-model="inputTagger" @keydown="createTagger">
              <span class="text-enter">按回车Enter创建标签</span>
            </div>

            <div class="item-div">
              <p class="text-p">简介</p>
              <textarea class="intro-input" v-model="projectModel.intro" placeholder="对于这首作品写下你想说的话吧"></textarea>
            </div>

          </div>

        </div>
      </div>
      <div class="loop-box" v-show="contributeType === CONTRIBUTE_TYPE.LOOP_PACKAGE.key">
        采样包
      </div>

      <div class="agree-div w-100 text-center">
        <div class="form-check form-check-inline">
          <input id="agree"
                 type="checkbox"
                 class="form-check-input agree-check"
                 v-model="agree"
                 @click="clickAgree()"
          >
          <label class="form-check-label text-p" for="agree">我已阅读并同意<a href="javascript:void(0)">xxx内容上传协议</a></label>
        </div>
        <div>
          <button class="btn-submit" @click="submitContribute">提交{{ contributeTitle }}</button>
        </div>


      </div>

    </div>

  </div>

<!--  上传图片-->
  <file-upload ref="imageFile"
               :contribute-type="contributeType"
               :upload-type="'picture'"
               :suffixs="['png', 'jpg', 'jpeg']"
               :input-id="'image-upload'"
  />
  <file-upload
    ref="musicFile"
    :contribute-type="contributeType"
    :upload-type="'music'"
    :suffixs="['mp3']"
    :input-id="'music-upload'"
  />
</div>
</template>

<script>
import FileUpload from "@/components/FileUpload";
export default {
  name: "Contribute",
  components: {FileUpload},
  data() {
    return {
      // 1 伴奏 2 工程 3 采样包
      contributeType: CONTRIBUTE_TYPE.ACCOMPANY.key,
      contributeTitle: CONTRIBUTE_TYPE.ACCOMPANY.value,
      chooseClass: {'choose' : true},
      step: 1,
      accompanyProgress: 100,
      projectProgress: 100,

      // 伴奏
      accompanyModel: {
        isOriginal: 1,
        originalLink: '',
        title: '',
        originalOwner: '',
        tagger: '',
        intro: ''
      },
      projectModel: {
        // 原创 remake remix
        projectType: 1,
        // 是否搬运（非原创）
        isTransfer: 1,
        originalOwner: '',
        thirdPartyLink: '',
        tagger: '',
        intro: ''
      },
      tagger: ['电子', 'midtempo'],
      inputTagger: '',

      agree: false,

      CONTRIBUTE_TYPE: CONTRIBUTE_TYPE,
      ORIGINAL_TRANSFER: ORIGINAL_TRANSFER,
      PROJECT_TYPE: PROJECT_TYPE,
      YES_NO: YES_NO

    }
  },
  mounted() {

  },
  computed: {
    dynamicAccompanyWidth() {
      return this.accompanyProgress + '%'
    },
    dynamicProjectWidth() {
      return this.projectProgress + '%'
    }
  },
  methods: {
    createTagger(e) {
      const keyCode = e.keyCode
      if (keyCode === 13) {
        const inputTagger = this.inputTagger
        if (inputTagger && inputTagger.trim() !== '') {
          this.tagger.push(inputTagger)
          this.inputTagger = ''
        }
      }
    },
    chooseType(t) {
      this.contributeType = t.key
      this.contributeTitle = t.value
      this.step = 1
    },
    uploadMaterials() {
      this.$refs.file.selectFile()
    },
    uploadPicture() {
      this.$refs.imageFile.selectFile()
    },
    uploadAccompany() {
      this.$refs.musicFile.selectFile()
    },
    uploadProject() {
      this.$refs.musicFile.selectFile()
    },
    toNext() {
      this.step = 2
    },
    clickAgree() {
      this.agree = !this.agree
      console.log(this.agree)
    },
    submitContribute() {

      switch (this.contributeType) {
        case CONTRIBUTE_TYPE.ACCOMPANY.key:
          console.log(this.accompanyModel)
          break
        case CONTRIBUTE_TYPE.PROJECT.key:
          console.log(this.projectModel)
          break
      }
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.contribute-box {
  margin: 10px auto;
  width: 70%;
  min-height: 800px;
  border-radius: 11px;
  box-sizing: border-box;
  border: 1px solid #ADADAD;
  padding-bottom: 10px;
}
.box-header {
  height: 60px;
  width: 100%;
  border-bottom: 1px solid #D8D8D8;
}
.space {
  /*margin-top: 20px;*/
  height: 30%;
}
.space-right {
  height: 20px;
}
.contribute-type {
  font-family: AlibabaPuHuiTiM,sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0em;
  margin: 0 13px;
  color: #CDCDCD;
}
.choose {
  color: #C234AF;
}
.box-content {
  width: 100%;
  height: 90%;
}
.inner-content {
  width: 45%;
  height: 50%;
  margin: 10% auto;
  text-align: center;
}
.click-to-upload {
  width: 100%;
  height: 81.11px;
  border-radius: 53px;
  box-sizing: border-box;
  border: 1px solid #B8B5B5;
  margin: 20px auto;
  display: flex;
}
.click-to-upload .left {
  width: 30%;
  height: 100%;
  border-right: 1px solid #D8D8D8;
}
.click-to-upload .left img {
  margin: 15px 0 0 5px;
}
.click-to-upload .right {
  width: 70%;
}
.click-to-upload .right p {
  /*width: 173.33px;*/
  /*height: 45.45px;*/
  font-family: AlibabaPuHuiTiM;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0em;
  color: #AAAAAA;
  margin: 20px auto;
}

.contribute-type:hover, .click-to-upload:hover, .upload-pic:hover, .music-fill:hover {
  cursor: pointer;
}
.accompany-box {
  display: flex;
}
.accompany-box .left {
  width: 25%;
  text-align: center;
}
.accompany-box .left p {
  padding: 5px;
  font-family: AlibabaPuHuiTiM;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  color: #7C7C7C;
}
.upload-pic {
  width: 101.87px;
  height: 101.87px;
  border: 2px dashed rgb(216,216,216);
  margin: 20px auto;
}
.upload-pic p {
  font-family: AlibabaPuHuiTiM;
  font-size: 12px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0em;
  color: #ADACAC;
}

.accompany-box .right {
  margin-left: 10px;
  width: 75%;
  /*height: 100%;*/
  /*border: 1px solid black;*/
}
.right-header {
  height: 90px;
  display: flex;
}
.music-fill {
  width: 100px;
  /*border: 2px dashed rgb(216,216,216);*/
  text-align: center;
}

.upload-progress {
  margin-top:50px;
  width: 70%;
}
.progress-bar {
  /*width: 100%;*/
  height: 0px;
  border: 3px solid #CE64B9;
}
.progress-desc {
  font-family: AlibabaPuHuiTiM;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  color: #3D3D3D;
}
.progress-text {
  margin-left: 5px;
  font-family: AlibabaPuHuiTiM;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  color: #D6D6D6;
}
.progress-text-div {
  width: 90%;
}
.trash {
  /*margin-left: 50px;*/
  float: right;
  /*height: 18.05px;*/
  color: #DDDDDD;
}
.item-div {
  margin: 10px 0;
}
.text-p {
  font-family: AlibabaPuHuiTiM;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  color: #3D3D3D;
}
.form-check {
  margin-top: 0;
}
.item-div input[type='text'] {
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #C7C7C7;
  width: 35%;
  height: 19.63px;
  margin-left: 5px;
  padding: 0 5px;
  color: #3D3D3D;
  font-size: 13px;
}
.tagger-input {
  width: 45%;
  height: 22.58px;
  transform: rotate(0deg);
  border-radius: 9px;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  color: #3D3D3D;
  padding: 0 5px;
  font-size: 13px;
}
.text-enter {
  margin-left: 10px;
  font-family: AlibabaPuHuiTiM;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  color: #8F8F8F;
}
.item-div input[type='text']:focus {
  border: #0dcaf0;
}
.intro-input {
  width: 90%;
  height: 116.88px;
  border-radius: 7px;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;
  padding: 0 5px;
  color: #3D3D3D;
}
.agree-div {
  font-family: AlibabaPuHuiTiM;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
}
.agree-check {
  height: 15px;
  width: 15px;
  margin-right: 3px;
}

.btn-submit {
  height: 53.92px;
  border-radius: 21px;
  background: #CE64B9;
  width: 193.14px;
  font-family: AlibabaPuHuiTiB;
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 0em;
  color: #FFFFFF;
  border: 0;
}
.project-content {
  width: 70%;
  margin: 0 auto;
}
.transfer-radio-hint {
  font-family: AlibabaPuHuiTiR;
  font-size: 10px;
  font-weight: normal;
  line-height: 5px;
  letter-spacing: 0em;
  color: #D0CFCF;
  margin-left: 7px;
}
.tagger {
  min-width: 32.5px;
  height: 21.58px;
  transform: rotate(0deg);
  border-radius: 9px;
  background: #D8D8D8;
  box-sizing: border-box;
  border: 1px solid #DFDFDF;

  font-family: AlibabaPuHuiTiR;
  font-size: 10px;
  font-weight: normal;
  line-height: 10px;
  letter-spacing: 0em;
  color: #3D3D3D;
}

</style>